<template>
  <view class="group-poster">
    <canvas
      v-if="isFinishCanvas"
      class="group-poster-canvas"
      :canvas-id="canvasId"
    />
    <image :show-menu-by-longpress="true" :src="tempFilePath" />
  </view>
</template>

<script>
import mixins from "_c/generate-image/mixins.js";
import Taro from "@tarojs/taro";
/**小程序背景图 */
const WECHAT_BG =
  "https://app-version-1.oss-cn-shenzhen.aliyuncs.com/oss/savatar/2021/1610005350_137.png";
/**名称背景图 */
const TITLE_BG =
  "https://app-version-1.oss-cn-shenzhen.aliyuncs.com/oss/savatar/2021/1610006621_493.png";
export default {
  mixins: [mixins],
  props: {
    canvasId: {
      type: String,
      default: "1"
    },
    invite_img: {
      type: String,
      default: ""
    },
    shareInfo: {
      type: Object,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      tempFilePath: "",
      isFinishCanvas: true,
      canvasData: [
        {
          type: "image",
          value: this.invite_img,
          dWidth: 440,
          dHeight: 782
        },
        // {
        //   type: "GRADUAL_BG",
        //   startPoint: [0, 0, 0, 104], // 起点坐标 (0,0)为左上点 (0,104)为坐下点
        //   gradualColor: ["rgba(0, 0, 0, 0)", "rgba(0, 0, 0, 0.5)"],
        //   position: [0, 0],
        //   width: 440,
        //   height: 104
        // },
        {
          type: "image",
          value: TITLE_BG,
          dWidth: 440,
          dHeight: 104,
          position: [0, 0]
        },
        {
          type: "image",
          value: WECHAT_BG,
          dWidth: 120,
          dHeight: 120,
          position: [300, 642]
        },
        {
          type: "image",
          value: this.shareInfo?.qr_code,
          dWidth: 108,
          dHeight: 108,
          position: [306, 648]
        },
        {
          type: "image",
          value: this.shareInfo?.avatar,
          dWidth: 56,
          dHeight: 56,
          radius: true,
          position: [24, 24]
        },
        {
          type: "text",
          value: this.shareInfo?.nick_name,
          dWidth: 250,
          dHeight: 34,
          fontSize: 24,
          color: "#ffffff",
          position: [92, 36]
        }
      ]
    };
  },
  watch: {
    // shareInfo: {
    //   handler: function(newVal) {
    //     console.log(newVal, "newVal");
    //     if (!newVal?.nick_name) return;
    //     // Taro.nextTick(() => {
    //     this.handleStartDrawImg();
    //     // });
    //   },
    //   immediate: true
    // }
  },
  mounted() {
    this.handleStartDrawImg();
  },
  methods: {
    /**开始生成图片 */
    handleStartDrawImg() {
      try {
        this.$emit("start");
        console.log("start=========");
        this.drawCanvas(this.canvasData);
      } catch (e) {
        this.$emit("end");
      }
    },
    canvasToImage() {
      Taro.canvasToTempFilePath(
        {
          // 调用小程序API对canvas转换成图
          x: 0, // 开始截取的X轴
          y: 0, // 开始截取的Y轴
          width: 440, //this.imgInfo.width, // 开始截取宽度
          height: 782, //this.imgInfo.height, // 开始截取高度
          destWidth: 440 * 2, // 截取后图片的宽度（避免图片过于模糊，建议2倍于截取宽度）
          destHeight: 782 * 2, // 截取后图片的高度（避免图片过于模糊，建议2倍于截取宽度）
          canvasId: this.canvasId, // 截取的canvas对象
          success: res => {
            // 转换成功生成临时链接并调用保存方法
            this.tempFilePath = res.tempFilePath;
          },
          complete: () => {
            this.$emit("end");
            this.isFinishCanvas = false;
          }
        },
        this.$scope
      );
    }
  }
};
</script>

<style lang="scss">
.group-poster {
  // width: 440px;
  width: 100%;
  height: 782px;
  position: relative;
  .group-poster-canvas {
    width: 2000px;
    height: 2000px;
    position: absolute;
    right: -3000px;
    top: -3000px;
    z-index: -1;
  }
  > image {
    width: 100%;
    height: 100%;
    border-radius: 16px;
  }
}
</style>
